<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
{{ form.csrf_token }}
{{form.author.label}}
{{form.author}}
{% for err in form.author.errors %}
{{err}}
{% endfor %}
    <br>
{{form.book.label}}
{{form.book}}
{% for err in form.book.errors %}
{{err}}
{% endfor %}
    <br>
{{form.submit}}
</form>

<hr>
<ur>

    {% for author in author_li %}
    <li>作者:{{author.name}}</li>
    <ur>

        {% for book in author.book %}
        <li>书籍 : {{book.title}}</li>

        <!--<a href="/delete?book_id={{book.id}}">删除</a>-->
        <a href="javascript:;" id={{book.id}}>删除-POST</a>


        {% endfor %}

    </ur>

    {% endfor%}

</ur>

<script src="../static/js/jquery-1.12.4.min.js" ></script>
<script>
    $('a').click(function () {
        //设置json数据
        var data = {
            'book_id':$(this).attr('id')
        };
        var json_data = JSON.stringify(data);
        //第一种方式:这种方式发过去,默认为form格式,flask前端通过request.form来接收就可以
//        $.post('/delete',data, function (data) {
//        })

        //第二种方式:这种方式发过去,默认也为form格式,但是只有字典的键,没有值
//        $.post('/delete',json_data,function () {
//
//        } )

        //第三种方式才是真正的传输json格式过去,因为必须要致命contentType类型和dataType
        //并且接收的也必须是json数据格式
        $.ajax({
            url: "/delete",
            type:'post',
            data:json_data,
            contentType:'application/json',
//            dataType:'json',
            success:function (resp) {
                if(resp.isok == 1){
                    location.href = '/';
                }
            }
        })
    })

</script>



</body>
</html>